<!--
  功能：修改个人信息
  作者：licy
  邮箱：licy@briup.com
  时间：2021年01月11日 22:31:04
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class=''>
    <div v-if="user.student">
      <el-form ref="apply_form" :model="form" :rules="rules" size="mini" label-width="100px" label-position="center">
          <div class="sub_title">基本信息</div>
          <el-row>
            <el-col>
              <el-form-item label="身份证号" prop="idCard">
                <el-input disabled v-model="form.idCard" placeholder="身份证号作为账号进行登录，是您在杰普档案的唯一标识"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="姓名" prop="realname">
                <el-input v-model="form.realname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
           <el-row>
            <el-col :md="12">
              <el-form-item label="钉钉手机号" prop="ddTel">
                <el-input v-model="form.ddTel"></el-input>
              </el-form-item>
            </el-col>
             <el-col :md="12">
              <el-form-item label="手机号" prop="tel">
                <el-input v-model="form.tel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="qq" prop="qq">
                <el-input v-model="form.qq"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="民族" prop="nation">
                <el-select v-model="form.nation" filterable>
                  <el-option v-for="item in nations" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="监护人" prop="guardian">
                <el-input v-model="form.guardian" placeholder="监护人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="联系方式" prop="guardianTel">
                <el-input v-model="form.guardianTel" placeholder="填写监护人手机号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
         
          <el-row>
            <el-col :md="12">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-cascader 
                 v-model="form.nativePlace" 
                 clearable 
                 :options="pca" 
                 :props="{children: 'children', label: 'name', value: 'name'}" ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="政治面貌" prop="politicsStatus">
                <el-select v-model="form.politicsStatus">
                  <el-option label="团员" value="团员"></el-option>
                  <el-option label="党员" value="党员"></el-option>
                  <el-option label="群众" value="群众"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
           <el-row>
            <el-col :span="24">
              <el-form-item label="家庭住址" prop="homeAddress">
                 <el-cascader 
                 v-model="form.pca" 
                 clearable 
                 :options="pca" 
                 :props="{children: 'children', label: 'name', value: 'name'}" ></el-cascader>
                <el-input v-model="form.homeAddress" style="width:500px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="sub_title">渠道信息</div>
          <el-row>
            <el-col :md="12">
              <el-form-item label="学校渠道" prop="channelId">
                <el-cascader disabled style="width:100%" v-model="form.channelId" clearable :options="channels" placeholder="请选择院校渠道"
            :props="{ children:'children',label:'name',value:'id', emitPath: false}" ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="杰普班级" prop="clazzId">
                <el-cascader v-model="form.clazzId" clearable 
                :options="directionClazzTree" 
                placeholder="请选择班级"
                :props="{ children:'clazzes',label:'name',value:'id', emitPath: false}" ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="校内班级" prop="schoolStuClazz">
                <el-input v-model="form.schoolStuClazz" placeholder="请输入完整的校内班级名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="校内学号" prop="schoolStuNo">
                <el-input v-model="form.schoolStuNo" placeholder="请输入完整的校内学号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
               <el-form-item label="毕业时间" prop="graduationTime">
                <el-date-picker v-model="form.graduationTime" value-format="timestamp" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col>
            <el-col :md="12">
               <el-form-item label="专业" prop="major">
                <el-input v-model="form.major" placeholder="请输入完整的专业名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="学历" prop="education">
                <el-select v-model="form.education">
                  <el-option label="专科" value="专科"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="研究生" value="研究生"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="外语水平" prop="flp">
                <el-select v-model="form.flp">
                  <el-option value="无" label="无"></el-option>
                  <el-option value="CET4" label="CET4"></el-option>
                  <el-option value="CET6" label="CET6"></el-option>
                  <el-option value="CET8" label="CET8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item style="text-align:right">
                <el-button @click="$router.go(-1)" size="small" >返回</el-button>
                <el-button @click="submitHandler" size="small" type="primary">确认修改</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
    </div>
  </div>
</template>

<script>
import {post} from '@/utils/request'
import { mapGetters ,mapActions} from 'vuex'
import _ from 'lodash'
import pca from '@/assets/pca.json'
import {nations} from '@/utils/commonData'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
     nations: nations,
     pca,
     form: {},
     rules: {
        ddTel: [ { required: true, message: '请输入钉钉手机号', trigger: 'blur' } ],
        tel: [ { required: true, message: '请输入手机号', trigger: 'blur' } ],
        realname: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
        qq: [ { required: true, message: '请输入qq', trigger: 'blur' } ],
        nation: [ { required: true, message: '请输入民族', trigger: 'blur' } ],
        gender: [ { required: true, message: '请选择性别', trigger: 'blur' } ],
        idCard: [ { required: true, message: '请输入身份证号', trigger: 'blur' } ],
        birth: [ { required: true, message: '请输入生日', trigger: 'blur' } ],
        flp: [ { required: true, message: '请选择外语水平', trigger: 'change' } ],
        major: [ { required: true, message: '请输入专业', trigger: 'change' } ],
        channelId:[{ required: true, message: '请选择院校渠道', trigger: 'change' }],
        education:[{ required: true, message: '请选择学历', trigger: 'change' }],
        graduationTime:[{ required: true, message: '请选择毕业时间', trigger: 'change' }],
        guardian:[{ required: true, message: '请输入监护人姓名', trigger: 'blur' }],
        guardianTel:[{ required: true, message: '请输入监护人手机号', trigger: 'blur' }],
        homeAddress:[{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
        nativePlace:[{ required: true, message: '请选择籍贯', trigger: 'change' }],
        politicsStatus:[{ required: true, message: '请选择政治面貌', trigger: 'blur' }],
        schoolStuClazz:[{ required: true, message: '请输入校内班级', trigger: 'blur' }],
        schoolStuNo:[{ required: true, message: '请输入校内学号', trigger: 'blur' }],
        pca: [ { required: true, message: '请选择地址', trigger: 'change' } ],
      },
   }
  },
  // 计算属性
  computed: {
    ...mapGetters(["user","channels","directionClazzTree"])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapActions('user',['getInfo']),
    // 提交处理函数
    submitHandler() {
      this.$refs['apply_form'].validate((valid) => {
        if (valid) {
          const url = '/student/saveOrUpdate'
          let form = _.cloneDeep(this.form);
          form.nativePlace = form.nativePlace.join('/');
          form.homeAddress = form.pca.join(' ')+' '+form.homeAddress;

          post(url, form)
            .then(response => {
              this.getInfo();
              this.$message({ message: response.message, type: 'success' })
              this.$router.go(-1);
            })
        } else {
          return false
        }
      })
    },
  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
    let form = _.clone(this.user.student);

    form.nativePlace = form.nativePlace?form.nativePlace.split('/'):[];
    let arr = form.homeAddress?form.homeAddress.split(" "):[]
    form.pca = arr.slice(0,3)
    form.homeAddress = arr[3];
    this.form = form;
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">
.sub_title {
  color: rgb(139, 133, 133);
  font-size: 12px;
  /* border-bottom: 1px solid #ccc; */
  background-color: #ededed;
  padding: 1em .5em ;
  border-radius: 3px;
  margin-bottom: 1em;
} 
</style>
